<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 24px; font-weight: bold"
          >{{pmcs.pmcsName}}</span
        >
      </div>
      <div>
        <el-row :gutter="20">
          <el-form label-width="120px" >
            <el-row :gutter="20">

            
            <el-col :span="12" style="line-height: 30px">
              <p><el-form-item label="设备名称:" style="margin-left: -40px">{{pmcs.equipment.name}} </el-form-item></p>
              <p>
                <el-form-item label="设备编号:" style="margin-left: -40px"
                  >{{pmcs.code2}}
                </el-form-item>
              </p>
            </el-col>
            <el-col :span="12" style="line-height: 30px">
              <p><el-form-item label="规格型号:" style="margin-left: -300px"> {{pmcs.equipment.specifications}} </el-form-item></p>
              <p>
                <el-form-item label="设备类型:" style="margin-left: -300px"
                  >{{pmcs.equipment.deviceType}}
                </el-form-item>
              </p>
            </el-col>
            <el-col :span="12" style="line-height: 30px">
              <p><el-form-item label="存放位置:" style="margin-left: -40px" >{{ pmcs.equipment.storageLocation }}} </el-form-item></p>
              <p>
                <el-form-item label="使用部门:" style="margin-left: -40px"
                  >{{pmcs.equipment.useDepartments}}
                </el-form-item>
              </p>
            </el-col>
          </el-row>
          </el-form>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-tabs v-model="tab" @tab-click="handleClick">
            <el-tab-pane label="任务信息" name="任务信息"></el-tab-pane>
            <el-tab-pane label="点检明细" name="点检明细"></el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-card>
    <span v-if="tab == '任务信息'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
        </div>

        <el-form label-width="250px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务编号:">{{pmcs.code1}} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务名称:">{{pmcs.pmcsName}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划名称:">{{pmcs.deviceSpotcheck.spotcheckName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务计划序号:">{{pmcs.pmcsNumber}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划开始时间:">{{pmcs.pmcsOkontime}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划结束时间:">{{pmcs.pmcsOkuntime}}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>点检人员</span>
        </div>

        <el-form label-width="250px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="点检班组:">{{pmcs.deviceSpotcheck.spotcheckClassId}} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点检人:">{{pmcs.deviceSpotcheck.spotcheckPerson}}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>点检时间</span>
        </div>

        <el-form label-width="250px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间:">{{pmcs.pmcsOkontime}} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间:">{{pmcs.pmcsOkuntime}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点检用时:">{{pmcs.pmcsTime}}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </span>
    <span v-if="tab == '点检明细'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>点检明细</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="pmts" style="width: 100%" border>
            <el-table-column type="selection"></el-table-column>
            <el-table-column
              prop="index"
              label="序号"
              width="50"
            ><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column>
            <el-table-column label="点检项目名称" prop="pmts.pmtsName"> </el-table-column>
        <el-table-column label="点检项目编号" prop="pmts.code"> </el-table-column>
        <el-table-column label="点检部位" prop="pmts.pmtsPartId"> </el-table-column>
        <el-table-column label="点检方法" prop="pmts.pmtsMethod"> </el-table-column>
        <el-table-column label="点检内容" prop="pmts.pmtsContent"> </el-table-column>
        <el-table-column label="判定标准" prop="pmts.pmtsCalibration"> </el-table-column>
        <el-table-column label="点检结果" prop="isJudge"> </el-table-column>
        <el-table-column label="是否正常" prop="state">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">正常</span>
            <span v-else>异常</span>
          </template>
           </el-table-column>
        <el-table-column label="备注"> </el-table-column>
      </el-table>
        </div>
      </el-card>
    </span>
  </div>
</template>
  
  <script>
  import { selectPmts } from '@/api/eastjet-maintenance/spotcheck/spotcheckPlan';

export default {
  data() {
    return {
      tab: "任务信息",
      activeTab: "info", // 默认选中任务信息标签页
      pmcs:{},
      pmts: [],
    };
  },mounted() {
    this.init();
  },
  methods: {
    handleTabClick(tab) {
      console.log("当前选中标签:", tab.name);
    },init(){
      this.pmcs = this.$route.query;
      console.log(this.pmcs);
      selectPmts(this.pmcs.code1,"").then(response => {
        this.pmts = response.data;
      })
    }
  },
};
</script>
  
  <style scoped>
.box-card {
  margin: 20px 20px 40px 40px;
  width: 1250px; /* 设置固定宽度 */
  max-width: 100%; /* 防止过大 */
}
.close-card {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  /* margin-top: 20%; */
  text-align: center;
  z-index: 1;
}
.clearfix:after {
  font-weight: bold;
}
.completion-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px; /* 设置宽度 */
  height: 100px; /* 设置高度 */
  border-radius: 50%; /* 圆形 */
  border: 3px dashed #28a745; /* 虚线边框 */
  color: #28a745; /* 字体颜色 */
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
}
</style>
  